import { useEffect, useState } from 'react';
import { Row, Col, Space, Tag } from 'antd';
import { groupBy, sumBy } from 'lodash';
import classNames from 'classnames';
import styles from './index.less';

const statisticData = [
  {
    xsName: '乔宇轩',
    bookName: '惊喜的秋天',
    readTotalMinutes: 20,
  },
  {
    xsName: '白政燊',
    bookName: '和大人一起读（二）',
    readTotalMinutes: 41,
  },
  {
    xsName: '王子岳',
    bookName: '好故事大全集',
    readTotalMinutes: 150,
  },
  {
    xsName: '刘宇超',
    bookName: '火热的冬天',
    readTotalMinutes: 45,
  },
  {
    xsName: '冯楷淇',
    bookName: '去旅行看中国地理奇观',
    readTotalMinutes: 20,
  },
  {
    xsName: '乔宇轩',
    bookName: '和大人一起读（四）',
    readTotalMinutes: 75,
  },
  {
    xsName: '冯楷淇',
    bookName: '不爱说话的小光',
    readTotalMinutes: 10,
  },
  {
    xsName: '乔宇轩',
    bookName: '好饿的毛毛虫',
    readTotalMinutes: 10,
  },
  {
    xsName: '乔宇轩',
    bookName: '拜访大树',
    readTotalMinutes: 15,
  },
  {
    xsName: '冯楷淇',
    bookName: '大米王国做五花饭',
    readTotalMinutes: 15,
  },
  {
    xsName: '乔宇轩',
    bookName: '海底小纵队海马传说',
    readTotalMinutes: 20,
  },
  {
    xsName: '乔宇轩',
    bookName: '恐龙闯进磨磨蹭蹭镇',
    readTotalMinutes: 290,
  },
  {
    xsName: '乔宇轩',
    bookName: '巡逻的警车',
    readTotalMinutes: 20,
  },
  {
    xsName: '乔宇轩',
    bookName: '时间管理',
    readTotalMinutes: 55,
  },
];

export default () => {
  const [type, setType] = useState('thisWeek');
  const [allData, setAllData] = useState([]);
  const [summaryData, setSummaryData] = useState([]);

  useEffect(() => {
    if (allData) {
      const groups = groupBy(allData || [], 'xsName');
      setSummaryData(
        Object.keys(groups).map((key) => ({
          xsName: key,
          bookCount: groups[key].length,
          readTotalMinutes: sumBy(groups[key], 'readTotalMinutes'),
        })),
      );
      return;
    }
    setSummaryData([]);
  }, [allData]);

  useEffect(() => {
    setAllData(statisticData);
    setType('thisWeek');
  }, []);

  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className={classNames('bg', 'bg-2', styles['bg-2'])} />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>阅读统计</span>
          </Row>
        </Col>{' '}
        <Col flex="40px" style={{ display: 'flex' }}>
          <Space align="center">
            <Tag color="processing">本周</Tag>
            <Tag color="default">上周</Tag>
            <Tag color="default">本月</Tag>
            <Tag color="default">上月</Tag>
            <Tag color="default">本学期</Tag>
            <Tag color="default">上学期</Tag>
            <Tag color="default">本学年</Tag>
          </Space>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="85px" className="header">
              姓名
            </Col>
            <Col flex="auto" className="header">
              书目数量(本)
            </Col>
            <Col flex="85px" className="header">
              阅读时长(分)
            </Col>
          </Row>
        </Col>
        <Col flex="auto" className="data-table-body">
          {summaryData.map((x) => (
            <Row key={x.xsName} className="data-table-row" wrap={false}>
              <Col flex="85px">{x.xsName}</Col>
              <Col
                flex="auto"
                style={{ textDecoration: 'underline' }}
                onClick={() => showStudentData(x.xsName)}
              >
                &nbsp;{x.bookCount}&nbsp;
              </Col>
              <Col flex="85px">{x.readTotalMinutes}</Col>
            </Row>
          ))}
        </Col>
      </Row>
    </div>
  );
};
